<template>
  <div class="hot-sider">
    <div class="title">
      <h1 class="title-text">主页</h1>
    </div>
    <div class="link-list">
      <div class="button-group">
        <a-button
          type="text"
          size="large"
          class="button-with-icon"
          :class="{ active: activeTab === 'home' }"
          @click="navigateTo('home')"
          ><template #icon><HomeOutlined /></template>用户主页</a-button
        >
        <a-button
          type="text"
          size="large"
          class="button-with-icon"
          :class="{ active: activeTab === 'followList' }"
          @click="navigateTo('followList')"
          ><template #icon><TeamOutlined /></template>我的关注</a-button
        >
        <a-button
          type="text"
          size="large"
          class="button-with-icon"
          :class="{ active: activeTab === 'fanList' }"
          @click="navigateTo('fanList')"
          ><template #icon><TeamOutlined /></template>我的粉丝</a-button
        >
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { TeamOutlined, HomeOutlined } from "@ant-design/icons-vue";
import { useRouter, useRoute } from "vue-router";
import { useLoginUserStore } from "@/store/useLoginUserStore";

const router = useRouter();
const route = useRoute();
const userStore = useLoginUserStore();
const currentUserId = userStore.loginUser?.id;
const isHomePage = () => {
  const userIdPattern = /^\/user\/\d+$/;
  return userIdPattern.test(route.path);
};

const activeTab = ref<"home" | "followList" | "fanList">(
  route.path.includes("followList")
    ? "followList"
    : route.path.includes("fanList")
    ? "fanList"
    : isHomePage()
    ? "home"
    : "home"
);
const navigateTo = (tab: "home" | "followList" | "fanList") => {
  activeTab.value = tab;
  if (activeTab.value === "home") {
    router.push(`/user/${currentUserId}`);
  } else {
    router.push(`/user/${tab}`);
  }
};
</script>

<style scoped>
.title-text {
  font-size: 20px;
  font-weight: 550;
}

.button-group {
  display: flex;
  flex-direction: column;
  width: 100%;
}

:deep(.button-with-icon .ant-btn-icon) {
  margin-right: 8px; /* 图标和文字之间留点空隙 */
}

:deep(.button-with-icon) {
  font-size: 16px !important;
  color: #333 !important;
  justify-content: flex-start; /* 内容左对齐 */
  text-align: left; /* 确保文字左对齐 */
  padding-left: 0; /* 去掉默认内边距影响对齐 */
}

:deep(.button-with-icon.active) {
  color: #398bfb !important;
}
</style>
